<template>
	<view class="main-box">
		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 原密码输入框 -->
			<view class="form-item">
				<view class="form-label">原密码</view>
				<view class="form-input-wrap">
					<input v-if="showOldPassword" class="form-input" type="text" v-model="formData.oldPassword" placeholder="请输入原密码" maxlength="20" />
					<input v-if="!showOldPassword" class="form-input" type="password" v-model="formData.oldPassword" placeholder="请输入原密码" maxlength="20" :password="true" />
					<text class="iconfont" :class="showOldPassword ? 'icon-xianshimima' : 'icon-buxianshimima'" @click="toggleOldPassword" style="padding:0 0 0 20px;"></text>
				</view>
			</view>

			<!-- 新密码输入框 -->
			<view class="form-item">
				<view class="form-label">新密码</view>
				<view class="form-input-wrap">
					<input v-if="showNewPassword" class="form-input" type="text" v-model="formData.newPassword" placeholder="请输入新密码" maxlength="20" />
					<input v-if="!showNewPassword" class="form-input" type="password" v-model="formData.newPassword" placeholder="请输入新密码" maxlength="20" :password="true" />
					<text class="iconfont" :class="showNewPassword ? 'icon-xianshimima' : 'icon-buxianshimima'" @click="toggleNewPassword" style="padding:0 0 0 20px;"></text>
				</view>
			</view>

			<!-- 确认新密码输入框 -->
			<view class="form-item">
				<view class="form-label">确认新密码</view>
				<view class="form-input-wrap">
					<input v-if="showConfirmPassword" class="form-input" type="text" v-model="formData.confirmPassword" placeholder="请再次输入新密码" maxlength="20" />
					<input v-if="!showConfirmPassword" class="form-input" type="password" v-model="formData.confirmPassword" placeholder="请再次输入新密码" maxlength="20" :password="true" />
					<text class="iconfont" :class="showConfirmPassword ? 'icon-xianshimima' : 'icon-buxianshimima'" @click="toggleConfirmPassword" style="padding:0 0 0 20px;"></text>
				</view>
			</view>

			<!-- 密码规则提示 -->
			<view class="password-tips">
				<text>密码长度为6-20位，可以是数字或字母与数字组合</text>
			</view>
		</view>

		<!-- 提交按钮 -->
		<button class="submit-btn" @click="submitForm">确认修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				},
				showOldPassword: false,
				showNewPassword: false,
				showConfirmPassword: false
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 切换原密码可见状态
			toggleOldPassword() {
				this.showOldPassword = !this.showOldPassword;
			},

			// 切换新密码可见状态
			toggleNewPassword() {
				this.showNewPassword = !this.showNewPassword;
			},

			// 切换确认密码可见状态
			toggleConfirmPassword() {
				this.showConfirmPassword = !this.showConfirmPassword;
			},

			// 验证密码规则
			validatePassword(password) {
				// 密码必须是6-20位，可以是数字或字母或字母与数字组合均可
				const validLength = password.length >= 6 && password.length <= 20;
				const validChars = /^[a-zA-Z0-9]+$/.test(password);

				return validLength && validChars;
			},

			// 提交表单
			submitForm() {
				// 再次验证表单
				if (!this.isFormValid()) {
					return;
				}

				const {
					oldPassword,
					newPassword,
					confirmPassword
				} = this.formData;

				// 显示加载中提示
				uni.showLoading({
					title: '提交中...',
					mask: true
				});

				// 调用修改密码接口
				this.$request.changePassword({
					old_password: oldPassword,
					new_password: newPassword,
					confirm_password: confirmPassword
				}, (res) => {
					// 修改成功
					uni.showToast({
						title: '密码修改成功',
						icon: 'success'
					});

					// 延迟返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				});
			},

			// 判断表单是否有效
			isFormValid() {
				const {
					oldPassword,
					newPassword,
					confirmPassword
				} = this.formData;

				// 检查所有字段是否已填写
				if (!oldPassword.trim()) {
					uni.showToast({
						title: "请填写原密码",
						icon: "none",
						mask: true,
						duration: 1500,
					})
					return false;
				}
				if (!newPassword.trim()) {
					uni.showToast({
						title: "请填写新密码",
						icon: "none",
						mask: true,
						duration: 1500,
					})
					return false;
				}
				if (!confirmPassword.trim()) {
					uni.showToast({
						title: "请填写确认新密码",
						icon: "none",
						mask: true,
						duration: 1500,
					})
					return false;
				}

				// 检查新密码是否符合规则
				const isPasswordValid = this.validatePassword(newPassword);
				if (!isPasswordValid) {
					uni.showToast({
						title: "新密码格式不正确",
						icon: "none",
						mask: true,
						duration: 1500,
					})
					return false;
				}

				// 检查新密码与确认密码是否一致
				const isPasswordMatch = newPassword === confirmPassword;
				if (!isPasswordMatch) {
					uni.showToast({
						title: "新密码与确认密码不一致",
						icon: "none",
						mask: true,
						duration: 1500,
					})
					return false;
				}

				return true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 引入sass样式变量(本来想全局引入，但是不成功，以后有空再解决)
	@import '@/static/scss/variables.scss';

	.navbar-left {
		width: 80rpx;
		display: flex;
		align-items: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #333;
	}

	.navbar-title {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.navbar-right {
		width: 80rpx;
	}

	/* 表单容器 */
	.form-container {
		padding: 3vw;
		border-radius: 3vw;
		background-color: white;
	}

	/* 表单项 */
	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
	}

	.form-input-wrap {
		display: flex;
		align-items: center;
		height: 88rpx;
		border-radius: 8rpx;
		background-color: #fff;
		padding: 0 24rpx;
		border: 1rpx solid #e0e0e0;
	}

	.form-input {
		flex: 1;
		height: 88rpx;
		font-size: 28rpx;
		color: #333;
	}

	.eye-icon {
		padding: 0 10rpx;
		font-size: 28rpx;
		color: #999;
	}

	/* 密码提示信息 */
	.password-tips {
		font-size: 24rpx;
		color: $colorPrimary;
		margin-bottom: 10rpx;
		padding: 0 10rpx;
	}

	.iconfont {
		color: $colorPrimary !important;
	}
</style>